<template>
    <view class="main-admin">
      <!-- edit form begin -->
      <view class="form-box shadow">
        <view class="form-group">
          <view class="title must">登录账号</view>
          <input maxlength="30" placeholder="请填写登录账号" v-model="formName" />
          <view v-if="formNameFocus" class="hint-desc error">{{ formNameFocus }}</view>
        </view>
        
  
        <view class="form-group">
          <view class="title must">姓名</view>
          <input maxlength="30" placeholder="请填写管理员姓名" v-model="formDesc" />
          <view v-if="formDescFocus" class="hint-desc error">{{ formDescFocus }}</view>
        </view>
        
  
        <view class="form-group">
          <view class="title">*手机</view>
          <input maxlength="11" placeholder="请填写手机号码" v-model="formPhone" />
          <view v-if="formPhoneFocus" class="hint-desc error">{{ formPhoneFocus }}</view>
        </view>
       
      </view>
  
      <view class="form-box shadow" style="margin-top: 12px;">
        <view class="form-group text-orange">
            <image src="/static/感叹号.png" mode="scaleToFill" style="width: 25px; height: 25px; position: relative; top: 6px;"/>
          <text class="icon-info" style="color: #f39e35;">不修改密码则保持以下为空</text>
        </view>
        <view class="form-group">
          <view class="title must">新密码</view>
          <input maxlength="30" type="password" placeholder="请填写密码" v-model="formPassword" />
        </view>
      </view>
  
      <button @click="bindFormSubmit" class="btn-admin margin-top">确定修改</button>
    </view>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import {
	onLoad
} from '@dcloudio/uni-app';
import { 
  adminGetadminById,
  adminUpdateAdmin
 } from '@/request/api.js'
 const formName = ref('');
 const formDesc = ref('');
 const formPhone = ref('');
 const formPassword = ref('');
 const id=ref('');
 const formNameFocus=ref('');
 const formDescFocus=ref('');
 const formPhoneFocus=ref('');
 // 使用 onLoad 生命周期钩子来获取页面参数
onLoad(async (e) => {
  id.value=e.id;
    adminGetadminById({id:e.id}).then((res) => {
      formName.value=res.data.data.accountNumber;
      formDesc.value=res.data.data.name;
      formPhone.value=res.data.data.phone;
    });
	});
  function bindFormSubmit(){
      if(formName.value==''){
        formNameFocus.value='请填写登录账号';
        return;
      }else{
        formNameFocus.value=""
      }
      if(formDesc.value==''){
        formDescFocus.value='请填写姓名';
        return;
      }else{
        formDescFocus.value=""
      }
      if(formPhone.value==''){
        formPhoneFocus.value='请填写手机号码';
        return;
      }else{
        formPhoneFocus.value=""
      }
      adminUpdateAdmin({
        id:id.value,
        accountNumber:formName.value,
        name:formDesc.value,
        phone:formPhone.value,
        password:formPassword.value
      }).then((res) => {
        // if(res.data == 'success')
        // console.log(res)
        if(res.statusCode == 200){
          uni.showToast({
            title: '修改成功',
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }else{
          uni.showToast({
            title: '修改失败',
            icon: 'none'
          });
        }
    });
  }
  </script>
  
  <style scoped>
  .main-admin {
    padding: 20px;
    background-color: #f9f9f9;
  }
  
  .form-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
  }
  
  .must::after {
    content: '*';
    color: red;
    margin-left: 5px;
  }
  
  input {
    /* width: 100%; */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
  }
  
  .hint-desc {
    font-size: 12px;
    color: red;
    margin-top: 5px;
  }
  
  .error {
    color: red;
  }
  
  .btn-admin {
    background-color: #007aff;
      color: white;
      /* padding: 10px 20px; */
      border-radius: 30px;
      /* font-size: 8px; */
      cursor: pointer;
      transition: background-color 0.3s;
      width: 277px;
      text-align: center;
      box-sizing: border-box;
      /* display: inline-block; */
      margin-top: 23px;
  }
  
  .btn-admin:hover {
    background-color: #0056b3;
  }
  </style>